<template>
    <div class="list" ref="listRef">
        <div class="pictureBox" :ref="setEleRefs" v-for="(item, index) in waterList" :style="{
            width: width + 'px',
            height: item.h + 'px',
            left: item.left + 'px',
            top: item.top + 'px',
            background: item.background,
        }">
            <div class="image" >
                <img :src="item.headImage" alt="">
                <div class="zhezhao">
                    <h4>{{ item.name }}</h4>
                    <p>{{ item.height }} <span>{{ item.bwh }}</span></p>
                </div>
            </div>
            <div class="name">
                {{ item.name }}
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';

const props = defineProps({
    list: {
        type: Array,
        default: () => {
            return [];
        },
    },
});

// 图片宽度
const width = 200;

const gutter = 75;

// 图片上下间距
const gap = 20;
// 瀑布流数组
const waterList = ref([]);
// 列高度数组
const heightList = reactive([0,0,0,0]);

const listRef=ref()

const eleRefs=ref([])

const setEleRefs=(el)=>{
    if(el){
        eleRefs.value.push(el)
    }
}

const setWaterfall = () => {
    // 计算列数
    const column = Math.floor(document.body.clientWidth / width);
    // 核心内容就是维护每个图片的 left、top
    for (let i = 0; i < props.list.length; i++) {
        // 先铺上第一行（i < column 则表示是第一行）
        if (i < column) {
            props.list[i].top = 0;
            props.list[i].left = width * i + i * gutter;
            // 塞进瀑布流
            waterList.value?.push(props.list[i]);
            // 高度数据更新

            console.log(eleRefs.value.length)

            heightList[i] = parseInt(props.list[i].h);
        }

        // 后面的就要一张张塞进去，每次找出最低的列往里塞
        else {
            // 最低的高度，先默认为第一列高度
            let current = heightList[0];
            // 最低的列，先默认为第一个
            let col = 0;

            // 循环每一列进行比较
            heightList.forEach((h, i) => {
                if (h < current) {
                    current = h;
                    col = i;
                }
            });

            console.log('最低的列', col, '高度为', current);

            // 由此计算出该图片的 left、top
            props.list[i].left = col * width + col * gutter;
            props.list[i].top = parseInt(current + gap);
            // 塞进瀑布流
            waterList.value.push(props.list[i]);

            // 更新列高度数组
            heightList[col] = current + gap + props.list[i].h;

            
        }
    }
    console.log(props.list)
    
}

watch(() => props.list, newValue => {
    console.log(1)
    // setH()
    setWaterfall()
})

// 屏幕宽度需要在 mounted 之后拿到
onMounted(() => {
    // setH()
    setWaterfall()
});
</script>
<style lang="scss" scoped>
.list {
    position: relative;
    min-height: calc(100vh - 220px);
    width: 100%;
    background-color: pink;

    .pictureBox {

        display: flex;
        flex-direction: column;
        overflow: hidden;

        position: absolute;


        img {
            display: block;
            width: 100%;
            
        }

        .image {
            overflow: hidden;
            position: relative;
            box-sizing: border-box;
            //background-color: red;

            .zhezhao {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                background: rgba(0, 0, 0, 0.44);
                opacity: 0;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                transition: all .4s;

                h4 {
                    color: white;
                    margin-bottom: 15px;
                    font-size: 24px;
                    margin-bottom: 30px;
                }

                p {
                    color: white;
                    line-height: 30px;
                    margin-top: 10px;
                }
            }

            &:hover {

                cursor: pointer;

                img {
                    transform: scale(1.2);
                }

                .zhezhao {
                    opacity: 1;
                }
            }
        }



        img {
            width: 100%;
            transition: all .4s;
            overflow: hidden;
        }

        .name {
            background-color: #f1f1f1;
            height: 40px;
            line-height: 40px;
            padding: 0 15px;
            color: #333333;
        }
    }
}
</style>